<template>
  <swiper :options="swiperOption" class="swiper" id="swiper">
    <swiper-slide class="swiper-slide"><img src="../assets/img/banner.png" alt=""></swiper-slide>
    <swiper-slide><img src="../assets/img/banner.png" alt=""></swiper-slide>
    <swiper-slide><img src="../assets/img/banner.png" alt=""></swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev" v-if="false"></div>
    <div class="swiper-button-next" slot="button-next" v-if="false"></div>
  </swiper>
</template>
<script>
export default {
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true // 允许点击小圆点跳转
        },
        autoplay: {
          delay: 3000,
          disableOnInteraction: false // 手动切换之后继续自动轮播
        },
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  }
};
</script>
<style scoped>
  .swiper{
    width: 100%;
    height: 100%;
  }
  .swiper-slide{
    width: 100%;
    height: 100%;
  }
  .swiper-slide img{
    width: 100%;
    height: 100%;
  }
</style>